<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-form ref="addressInfo" :model="addressInfo" :rules="rules" label-width="100px">
          <el-form-item label="地址" prop="address">
            <el-input placeholder="请选择地址" v-model="addressInfo.address" disabled>
              <template slot="prepend">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</template>
              <el-button slot="append" icon="el-icon-map" @click="showMap" type="primary">选择地址</el-button>
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="siteLng">
                <el-input v-model="addressInfo.siteLng" placeholder="请输入经度" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="siteLat">
                <el-input v-model="addressInfo.siteLat" placeholder="请输入纬度" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="success" icon="el-icon-edit" size="mini" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 百度地图位置选择 -->
    <BMapAddressSelect ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></BMapAddressSelect>

  </div>
</template>

<script>

import BMapAddressSelect from "@/components/BMapAddressSelect/index";
import { listLocation, getLocation, delLocation, addLocation, updateLocation,Location } from "@/api/gwLocation/gwLocation";
export default {
  data() {
    return {
      // 位置信息
      addressInfo: {},
      // 表单校验
      rules: {},
    };
  },
  components: {
    BMapAddressSelect,
  },
  methods: {
    /** 显示地图 */
    showMap() {
      this.$refs.bmapAddressSelect.show();
    },

    getLists(){
      Location().then(response => {
        console.log("====",response.rows)
        this.addressInfo = response.rows;
      });
    },
    /** 确认地图地址 */
    confirmMapAddress(addressInfo) {
      this.addressInfo = addressInfo;
      this.addressInfo.siteLat=this.addressInfo.latitude
      this.addressInfo.siteLng=this.addressInfo.longitude
      console.log("输出===",this.addressInfo)
    },
    submitForm() {
      this.addressInfo.address = this.addressInfo.province
        +this.addressInfo.city
        +this.addressInfo.district
        +this.addressInfo.address
      console.log("输出===",this.addressInfo)
      this.$refs["addressInfo"].validate(valid => {
        if (valid) {
          if (this.addressInfo.locationId != null) {
            /*updateLocation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });*/
          } else {
            /*addLocation(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });*/
          }
        }
      });
    },
  },
};
</script>
